<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="120px" label-position="left">
			<el-form-item label="商品ID" prop="goods_ids">
				<el-input v-model="form.goods_ids" :disabled="mode!=='add'" placeholder="不能为空" clearable></el-input>
			</el-form-item>
			<el-form-item label="店内(自购)佣金比例" prop="one_rate">
				<el-input-number v-model="form.one_rate" :min="0" :max="100" :precision="2" :controls="false" />
				<div class="el-input-group__append">%</div>
			</el-form-item>
			<el-form-item label="上级佣金比例" prop="two_rate">
				<el-input-number v-model="form.two_rate" :min="0" :max="100" :precision="2" :controls="false" />
				<div class="el-input-group__append">%</div>
			</el-form-item>
			<el-form-item label="上上级佣金比例" prop="three_rate">
				<el-input-number v-model="form.three_rate" :min="0" :max="100" :precision="2" :controls="false" />
				<div class="el-input-group__append">%</div>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	name: "edit",
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增',
				edit: '编辑',
				show: '查看'
			},
			visible: false,
			isSaveing: false,
			//表单数据
			form: {
				id:0,
				goods_ids: '',
				one_rate: 0,
				two_rate: 0,
				three_rate: 0,
			},
			//验证规则
			rules: {
				account: [
					{ required: true, message: '请输入登录账号', trigger: 'blur' },
					{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
				],
			},
			//所需数据选项
			groups: [],
			groupsProps: {
				value: "id",
				label: "name",
				multiple: true,
				checkStrictly: true
			}
		}
	},
	methods: {
		open(mode = 'add',editId = 0) {
			this.mode = mode;
			if (mode === 'edit') {
				this.getEditData(editId)
			} else {
				/*this.form = {
					id:0,
					goods_ids: '',
					one_rate: 0,
					two_rate: 0,
					three_rate: 0,
				};*/
				this.getConfigData();
			}
			this.visible = true;
		},
		getConfigData() {
			this.$API.fenxiao.level.info().then(res => {
				if (res.code === 0) {
					this.form = res.data;
				}
				else {
					this.$message.error(res.message);
				}
			});
		},
		getEditData(id) {
			this.$API.fenxiao.goodsLevel.info({id:id}).then(res => {
				if (res.code === 0) {
					let resData = res.data;
					resData.one_rate /= 1000;
					resData.two_rate /= 1000;
					resData.three_rate /= 1000;
					resData.goods_ids = resData.goods_id;
					this.form = resData;
				}
				else {
					this.$message.error(res.message);
				}
			})
			this.visible = true;
		},
		submit() {
			if (this.mode === 'add') {
				this.$API.fenxiao.goods.add(this.form).then(res => {
					if (res.code === 0) {
						this.$message.success('保存成功');
						this.visible = false;
						this.$emit('success');
					}
					else {
						this.$message.error(res.message);
					}
				})
			} else if (this.mode === 'edit') {
				this.$API.fenxiao.goodsLevel.update(this.form).then(res => {
					if (res.code === 0) {
						this.$message.success('保存成功');
						this.visible = false;
						this.$emit('success');
					}
					else {
						this.$message.error(res.message);
					}
				})
			}

		}
	}
}
</script>

<style lang="scss" scoped>
.el-form-item-help{
	color: #AAA;
}
.el-input-group__append{
	border: none;
	width: auto;
}
</style>
